<template>
<div id="register-box">
        <div style="padding-top: 10px;">
            <h1>注册界面</h1>
        </div>
        <div id="rg-form">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" id="username" name="username" placeholder="请输入用户名" v-model="user.username"></td>

                    </tr>
                    <tr>

                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" id="password" name="password" placeholder="请输入密码" v-model="user.password">
                        </td>
                    </tr>
                    <tr>

                        <td class="td_left"><label for="years">年龄</label></td>
                        <td class="td_right"><input type="years" id="years" name="years" placeholder="请输入年龄" v-model="user.years">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="height">身高(cm)</label></td>
                        <td class="td_right"><input type="height" name="height" id="height" placeholder="请输入身高" v-model="user.height"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="weight">体重(kg)</label></td>
                        <td class="td_right"><input type="weight" name="weight" id="weight" placeholder="请输入体重" v-model="user.weight"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号码</label></td>
                        <td class="td_right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号码" v-model="user.tel"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="">
                            <input type="radio" name="gender" value="1" v-model="user.gender"> 男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="gender" value="0" v-model="user.gender"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>劳动等级</label></td>
                        <td class="">
                            &nbsp;&nbsp;&nbsp;<input type="radio" name="labor" value="1" v-model="user.labor"> 乏活动&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="labor" value="2" v-model="user.labor"> 轻度活动&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="labor" value="3" v-model="user.labor"> 中度活动&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="labor" value="4" v-model="user.labor"> 重度活动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="labor" value="5" v-model="user.labor"> 非常重度活动
                        </td>
                    </tr>
                </table>
                <div class="illustrate">
                    乏活动（床上休息）
                    轻度活动（每周1-3次轻度运动）
                    中度活动（每周3-5次中等强度运动）
                    重度活动（每周6-7次高强度运动）
                    非常重度活动（每天进行非常重度的运动或体力劳动工作）

                    </div>
                        <button @click="register">注册</button>


        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            user:{
                username:'',
                password:'',
                height:'',
                weight:'',
                gender:'',
                tel:'',
                labor:'',
                years:''
            }
        }
    },
    methods: {
        register(){
        axios.post("/api//user/register",{
            username:this.user.username,
            password:this.user.password,
            height:this.user.height,
            weight:this.user.weight,
            gender:this.user.gender,
            tel:this.user.tel,
            labor:this.user.labor,
            years:this.user.years
        })
        .then(res=>{
            if(res.code==1){
                this.$router.push('/')
                alert('注册成功')
            }else{
                alert('注册失败')
            }
        })
        .catch(err=>{
            ElMessage('数据异常')
        })
        }
    },
}
</script>


<style scoped>
table{
    border-collapse:collapse ;
    border: none;
    outline: 0;
}
td{
    border: none;
    outline: 0;
}
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
#register-box {
    width: 500px;
    /* height: 500px; */
    border: 0px solid #EEEEEE;
    background-color: #61f1661f;
    margin: auto;
    text-align: center;
    border-radius: 35px;
}

#register-box h1 {
    color: #455f5596;
    padding-top: 2px;
    padding-bottom: 25px;
}

.td_left {
    width: 150px;
    text-align: right;
    height: 45px;
}

.td_right {
    padding-left: 20px;
}

#username,
#password,
#height,
#name,
#weight,
#tel,
#years {
    width: 251px;
    height: 32px;
    border: 1px solid #a6a6a69f;
    /*设置边框圆角*/
    border-radius: 15px;
    padding-left: 10px;
}
#register-box button {
    margin-top: 30px;
    width: 150px;
    height: 40px;
    border-radius: 100px;
    outline: none;
    border: none;
    background-image: linear-gradient(120deg, rgb(105, 163, 76), rgb(92, 103, 211));
    color: white;
    font-size: 20px;
}
.illustrate{
    width: 503px;
    margin-top: 10px;
    background-color: rgb(220, 246, 207);
}

</style>
